<!DOCTYPE html>
<html>

<head>
    <title>Flex</title>
    <style>
        .my-container {
            display: flex;
            border: 1px solid salmon;
        }

        .width-constrained {
            width: 250px;
        }

        .height-constrained {
            height: 250px;
        }

        .column {
            flex-direction: column;
        }

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>FlexBox Tests</h1>
    <p>The boxes are width and height 100px.</p>
    <h2>Row</h2>
    <h3>Width unconstrained</h3>
    <p>Default</p>
    <div class="my-container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <h3>Width 250px</h3>
    <p>Default</p>
    <div class="my-container width-constrained">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: nowrap</p>
    <div class="my-container width-constrained" style="flex-wrap: nowrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: wrap</p>
    <div class="my-container width-constrained" style="flex-wrap: wrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: wrap-reverse</p>
    <div class="my-container width-constrained" style="flex-wrap: wrap-reverse;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <h4>Flex-flow shorthand</h4>

    <p>flex-flow: row nowrap;</p>
    <div class="my-container width-constrained" style="flex-flow: row nowrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <p>flex-flow: row wrap;</p>
    <div class="my-container width-constrained" style="flex-flow: row wrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <h2>Column</h2>
    <h3>Height/Width unconstrained</h3>
    <p>Default</p>
    <div class="my-container column">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <h3>Height 250px</h3>
    <p>Default</p>
    <div class="my-container column height-constrained">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <h4>Also Width 250px</h4>
    <p>Default</p>
    <div class="my-container width-constrained column height-constrained">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: nowrap</p>
    <div class="my-container column width-constrained height-constrained" style="flex-wrap: nowrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: wrap</p>
    <div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
    <p>Flex-wrap: wrap-reverse</p>
    <div class="my-container column width-constrained height-constrained" style="flex-wrap: wrap-reverse;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <h4>Flex-flow shorthand</h4>

    <p>flex-flow: column nowrap;</p>
    <div class="my-container width-constrained height-constrained" style="flex-flow: column nowrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <p>flex-flow: column wrap;</p>
    <div class="my-container width-constrained height-constrained" style="flex-flow: column wrap;">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>

    <h2>Grow/Shrink</h2>
    <p>Container has width of 500px</p>
    <p>flex-grow: 4/2/0</p>
    <div class="my-container" style="flex-flow: row nowrap; width: 500px;">
        <div class="box" style="flex-grow: 4;">1 I grow the most</div>
        <div class="box" style="flex-grow: 2;">2 I grow</div>
        <div class="box" style="flex-grow: 0;">3 I don't</div>
    </div>
    <p>Container has width of 250px</p>
    <p>flex-shrink: 4/1/0</p>
    <div class="my-container" style="flex-flow: row nowrap; width: 250px;">
        <div class="box" style="flex-shrink: 4;">1 I shrink the most</div>
        <div class="box" style="flex-shrink: 1;">2 I shrink</div>
        <div class="box" style="flex-shrink: 0;">3 I don't</div>
    </div>
</body>

</html>
